//   底部显示与隐藏

import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default function () {
    let showFlag = ref(true);
    // 底部元素
    const floorBox = ref(null);
    // 获取vuex
    const store = useStore();
    //  初始化
    onMounted(() => {
        // 底部元素赋值在vuex中
        store.commit("floorBoxShow/getElement", floorBox.value);
        //  经过1.5秒自动隐藏
        if (showFlag.value) {
            store.commit("floorBoxShow/showLeave", 1500);
        }
    });
    // 显示与隐藏的动画class切换
    const bottom = computed(() => store.state.floorBoxShow.bottom);
    //  显示与隐藏的开关是否在开启中  props 传递的子组件 src/components/floorFuntionZone/FloorMain/FloorRightButton/index.vue
    function showbox(value) {
        showFlag.value = value;
    }
    // vuex中定义底部隐藏功能
    function showLeave() {
        store.commit("floorBoxShow/showLeave");
    }
    // vuex中定义的底部显示功能
    function showEnter() {
        store.commit("floorBoxShow/showEnter");
    }

    return {
        showFlag,
        floorBox,
        bottom,
        showLeave,
        showEnter,
        showbox,
    }
}